<template>
  <div class="tab-container">
    <div class="">
      <div class="paddingb textl paddingr" style="font-size:14px">
        <!--<span>关键字</span>-->
        <el-input v-model="input.queryStr" placeholder="可根据关键字查询" style="width:20%;"></el-input>

        <el-button style="margin-left:20px" @click="loadPageList" type="primary">查询</el-button>
        <el-button style="" @click="handleEdit('','add')" type="primary" icon="el-icon-circle-plus">添加</el-button>
        <div class="" style="padding:10px 0px;">
        </div>

      </div>
    </div>

    <el-table v-loading="loading" ref="multipleTable" @selection-change="handleSelectionChange" class="tableH"
              :data="list" border style="margin-top:20px;width:100%;font-size:12px;">
      <el-table-column type="selection" width="30px;">
      </el-table-column>
      <el-table-column align="center" label="内容">
        <template slot-scope="scope">
          {{ scope.row.content}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="图片">
        <template slot-scope="scope">
          <img :src="imgBaseUrl+scope.row.imgUrl" style="height:64px;width:64px"/>
        </template>
      </el-table-column>
      <el-table-column align="center" label="链接">
        <template slot-scope="scope">
          {{ scope.row.linkUrl}}
        </template>
      </el-table-column>


      <el-table-column align="center" label="操作" width="150px;">
        <template slot-scope="scope">
          <div @click="handleEdit(scope.row,'edit')"
               class="clickText" style="float:left;padding-left:5px">
            编辑
          </div>

          <div @click="delObj(scope.row)" class="clickText" style="float:left;padding-left:5px;color:red">
            删除
          </div>

        </template>
      </el-table-column>

    </el-table>

    <div class="pagination-container pageH" style="padding-top:20px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10,20,30, 50]"
                     :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper"
                     :total="total"></el-pagination>
    </div>


  </div>
</template>

<script>
  import {
    getObj,
    addObj,
    updObj,
    listObj,
    delObj,
  } from '@/api/floatBox'

  import table2excel from 'table2excel'
  import printArea from 'printArea'

  export default {
    components: {},
    data() {
      return {
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 350
        },
        activeTabPosition: '活动信息',
        ue1: "ue1", // 不同编辑器必须不同的id
        rej: {
          way: '1',
          info: '',
          id: ''
        },
        xyset: {
          order: '',
          id: ''
        },
        title: "",
        input: {
          queryStr: '',
        },
        inputE: {
          objName: '',
          enrollStart: '',
          enrollEnd: '',
        },
        listE: [],
        bank: '1',
        list: [],
        timeType: '1',
        dialogStatus: '',
        dialogFormVisible: false,
        dialogShowRole: false,
        dialogShowDep: false,
        dialogShowSH: false,
        dialogShowLevel: false,
        dialogadd: false,
        dialogsave: false,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 10,
        },
        listQuery2: {
          page: 1,
          limit: 10,
        },
        treeData: [],
        loading: true,
        multipleSelection: [],
        detailData: '',
        tfcheckStatus: '',
        checkStatus: -1,
        majorPlatform: {
          spName: '',
          spCompany: '',
          spDomain: '',
          spLevel: '',
          spLink: '',
        }
      }
    },
    async mounted()
  {

    this.loadPageList()

  }
  ,
  computed: {
  }
  ,
  methods: {
    async
    loadPageList()
    {
      if (this.input) {
        this.input.pageNum = this.listQuery.page
        this.input.pageSize = this.listQuery.limit
      }
      let {
        data,
        success
      } = await
      listObj(this.input)
      if (success) {
        this.loading = false
        this.list = data.list
        this.total = data.total
      }
    }
  ,
    handleSelectionChange(val)
    {
      let arr = []
      for (let i in val) {
        arr.push(val[i].id)
      }
      this.multipleSelection = arr;
    }
  ,
    handleCurrentChange(val)
    {
      if (!isNaN(val)) {
        this.listQuery.page = val
      }
      this.loadPageList()
    }
  ,
    async
    handleEdit(item, type)
    {
      if (type === 'edit') {
        this.title = '编辑'
        this.$router.push({
          name: 'floatBoxEdit',
          params: {
            itemId: item.id
          }
        })
      } else if (type === 'add') {
        this.title = '添加'
        this.$router.push({
          name: 'floatBoxEdit'
        })
      }
    }
  ,
    async
    loadEnrolls()
    {
      if (this.inputE) {
        this.inputE.page = this.listQuery2.page
        this.inputE.limit = this.listQuery2.limit
      }
      let {
        data,
        success
      } = await
      getEnrolls(this.inputE)
      if (success) {
        this.loading = false
        this.listE = data.list
        this.total = data.total
      }
    }
  ,
    delObj(item)
    {
      this.$confirm('此操作将删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let del = await delObj(item.id)
        this.list.splice(this.list.indexOf(item), 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        // this.splice(data.id, 1);
      }).catch(() => {
        this.$message({
        type: 'info',
        message: '已取消删除'
      });
      });
    }
  ,
  }
  }
</script>

<style lang="scss">
  @import '../../styles/index.scss'; // 全局自定义的css样式
</style>
